import { useEffect, useState } from 'react';
import styles from './home.module.css'
import { Search, Tag, Badge } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import { http } from '../../utils'

const Home = () => {
    const navigate = useNavigate()

    // 筛选条件样式切换控制变量
    const [sift, setSift] = useState('综合排序')

    
    const [distance, setDistance] = useState('')
    const [time, setTime] = useState('')

    useEffect(() => {
        if(sift == '距离最近'){
            setDistance(1)
            setTime('')
        }else if(sift == '速度快'){
            setTime(1)
            setDistance('')
        }else{
            setTime('')
            setDistance('')
        }
    }, [sift])

    useEffect(() => {
        getShop()
    }, [time,distance])


    // 请求店铺
    const [shop, setShop] = useState([])
    const getShop = async () => {
        let res = await http.get(`/wwz/getShop?distance=${distance}&time=${time}`)
        setShop([...res.data])
    }

    useEffect(() => {
        getShop()
    }, [])

    return (
        <div>
            {/* 顶部 */}
            <div className={styles.top}>
                <div className={styles.box1}>
                    <div>
                        <img src="/top1.svg" alt="" />
                        <span>地址</span>
                        <img src="/top2.svg" alt="" />
                    </div>
                    <Badge content={1}>
                        <img src="/top3.svg" alt=""
                            onClick={() => { navigate('/outlet/car') }}
                        />
                    </Badge>

                </div>
                <div className={styles.box2}>
                    <Search
                        shape='round'
                        background='none'
                        placeholder="请输入搜索关键词"
                        onFocus={() => navigate('/outlet/find')}
                    />
                </div>
                <div className={styles.box3}>
                    {
                        ['隆江猪脚饭', '奶茶', '菠萝炒饭', '狗肉肠粉', '烧烤生蚝'].map((i, index) => {
                            return (
                                <Tag textColor='#797979' color='#F6EBDD' round key={index} size='medium'>{i}</Tag>
                            )
                        })
                    }
                </div>
            </div>

            {/* 主要内容 */}
            <div className={styles.bot}>


                {/* 宫格分类 */}
                <div className={styles.type}>
                    <div className={styles.typeItem} onClick={() => { navigate('/outlet/type') }}>
                        <img src="/type1.svg" alt="" />
                        <p>美食</p>
                    </div>
                    <div className={styles.typeItem}>
                        <img src="/type2.svg" alt="" />
                        <p>快食简餐</p>
                    </div>
                    <div className={styles.typeItem}>
                        <img src="/type3.svg" alt="" />
                        <p>生鲜果蔬</p>
                    </div>
                    <div className={styles.typeItem}>
                        <img src="/type4.svg" alt="" />
                        <p>商超便利</p>
                    </div>
                    <div className={styles.typeItem}>
                        <img src="/type5.svg" alt="" />
                        <p>买药</p>
                    </div>
                    <div className={styles.typeItem}>
                        <img src="/type6.svg" alt="" />
                        <p>甜点饮品</p>
                    </div>
                    <div className={styles.typeItem}>
                        <img src="/type7.svg" alt="" />
                        <p>鲜花蛋糕</p>
                    </div>
                    <div className={styles.typeItem}>
                        <img src="/type8.svg" alt="" />
                        <p>平台专送</p>
                    </div>
                    <div className={styles.typeItem} onClick={() => { navigate('/outlet/type1') }}>
                        <img src="/type9.svg" alt="" />
                        <p>美食团购</p>
                    </div>
                    <div className={styles.typeItem}>
                        <img src="/type10.svg" alt="" />
                        <p>全部</p>
                    </div>

                </div>
                {/* 红包 */}
                <img src="/hb.png" alt="" className={styles.hb} />
                {/* 活动 */}
                <img src="/hd.jpeg" alt="" className={styles.hd} />

                {/* 筛选 */}
                <div className={styles.sift}>
                    {
                        ['综合排序', '距离最近', '减配送费', '速度快'].map((i, index) => {
                            return (
                                <Tag
                                    textColor={sift == i ? 'white' : '#999999'}
                                    color={sift == i ? 'linear-gradient(to right,#FF9901,#FF654D)' : 'white'}
                                    key={index} size='large'
                                    onClick={() => { setSift(i) }}
                                >{i}</Tag>
                            )
                        })
                    }
                    <img src="/sift.svg" alt="" />
                </div>

                {/* 推荐商家 */}
                {
                    shop.map((i, index) => {
                        return (
                            <div className={styles.recommend}>
                                <img src="/shop1.svg" alt="" />
                                <div className={styles.info}>
                                    <p><b>{i.name}</b></p>
                                    <p>
                                        <Tag textColor='#ff6600' color='none'>4.5分</Tag>
                                        <Tag textColor='#797979' color='none'>月售{i.num}</Tag>
                                        <Tag textColor='#797979' color='none'>人均￥45</Tag>
                                        <Tag textColor='#ff6600' color='#FAF5F5'>平台专送</Tag>
                                    </p>
                                    <p>
                                        <Tag textColor='#797979' color='none'>起送￥{i.price}</Tag>
                                        <Tag textColor='#797979' color='none'>免配送费</Tag>
                                        <Tag textColor='#797979' color='none'>{i.time}分钟</Tag>
                                        <Tag textColor='#797979' color='none'>{i.distance}km</Tag>
                                    </p>
                                    <p>
                                        {['50减3', '100减6', '150减10'].map((i, index) => {
                                            return (
                                                <Tag
                                                    key={index}
                                                    textColor='#ff6600'
                                                    plain
                                                >{i}</Tag>
                                            )
                                        })}
                                    </p>
                                </div>
                            </div>
                        )
                    })
                }



            </div>
        </div>
    )
}

export default Home